<template>
  <div class="login-modal">
      <div class="mask" ></div>
      <div class="login-box">
          <img class="close"  @click="closeLogin(false)" src="../assets/img/close.png" alt="">
           <ul class="title">
            <li :class="isShowForm?'active':''" @click="isShowForm=true">手机号码登录</li>
            <li style="margin:-2px 10px 0;cursor:auto;">|</li>
            <li :class="!isShowForm?'active':''" @click="isShowForm=false">微信扫码登录</li>
          </ul>
          <div class="body">
            <div class="form" v-show="isShowForm">
              <div class="input-group uname">
                <input ref="phone" type="text" placeholder="请输入手机号" v-model="phoneNum">
              </div>
              <div class="input-group mb20">
                <slide-verify
				 :l="42" 
				 :r="20" 
				 :w="360" 
				 :h="140" 
				 @success="onSuccess" 
				 @fail="onFail" 
				 @refresh="onRefresh" 
				 :style="{ width: '100%' }" 
				 class="slide-box" 
				 ref="slideBlock" 
				 :slider-text="msg"
				 ></slide-verify>  
              </div>
              
              <div class="input-group code mb20" >
                <input type="text" placeholder="请输入短信验证码" v-model="codenum">
                <div class="btn" :class="isShowCount?'has-count':''">
                  <span v-show="!isShowCount" @click="getSMScode">获取验证码</span>
                  <span v-show="isShowCount">{{count}} s</span>
                </div>
              </div>
              <div class="btn" @click="submitLogin">登录</div>
            </div>
            <div class="wx-qrcode" v-show="!isShowForm">微信二维码</div>
          </div>
      </div>
  </div>
</template>
<script>
import {mapMutations,mapState,mapActions} from "vuex"
import { sendAPI,phoneReginAPI,userAPI } from '@/request/api'
import {validatePhoneNumber} from "../utils"
export default {
  data () {
    return {
      // 控制表单盒子的显示和隐藏
      isShowForm:true,
      // 图片验证码滑块文字
      msg:"向右滑动",
      // 用户输入的手机号
      phoneNum:"16675053452",
      // 控制倒计时的显示和隐藏
      isShowCount:false,
      // 倒计时的数字
      count:60,
	  codenum:"123"
    }
  },
  
  computed:{	  
  },
  methods:{
    // 拼图成功
    onSuccess(times) {
      let ms = (times / 1000).toFixed(1);
      this.msg = "login success, 耗时 " + ms + "s";
    },
    // 拼图失败
    onFail() {
      this.onRefresh(); //调用方法刷出再试一次字样   并重新刷新拼图
    },
    // 拼图刷新
    onRefresh() {
      this.msg = "再试一次";//刷新函数
    },
  	// closeLogin(val){
  	// 	this.$store.commit('showLoginModel/changebool',val)
  	// }
  	
  	...mapMutations({changeisbool:"Loginbool/changeisbool"}),
  	...mapMutations({closeLogin:"showLoginModel/changebool"}),
	...mapActions({changeUser:"userInfo/changeUser"}),
  
  //定时器
    countDown(){
        let timer = setInterval(()=>{
          this.count--
          // 每一次count的变化,都需要验证是不是到0了,
          // 如果到0了,1关闭定时器,2隐藏倒计时文字,3初始化count,变成最大值60
          if(this.count===0){
            clearInterval(timer);
            this.isShowCount = false;
            this.count=60
          }
        },1000)
    },
	
	//判断封装
	verification(){
		if(!validatePhoneNumber(this.phoneNum)){
		  alert("请输入正确的手机号码！");
		  // 给用户直接聚焦
		  this.$refs.phone.focus();
		  return false;
		}
		if(this.msg==="再试一次" || this.msg==="向右滑动"){
		    alert("请滑动滑块至正确位置!");
		    return false;
		}
		return true;
	},
	
	
	//获取验证码
    async getSMScode(){
    if(!this.verification()){
		return
	}
      // 点击获取短信验证执行这里的的代码
      // 1 验证用户输入的手机号码格式是否正确, 如果不正确,就return
      // if(!正则对象.test(用户输入的信息)){
     
     //发送验证码
	 const res1=await sendAPI({
		 phone:this.phoneNum
	 })
	 console.log(res1);
	 
	 
	 
	 
	 
      // 2 验证滑块拼图验证码, 如果不通过, 就return
      // if(this.msg==="再试一次" || this.msg==="向右滑动"){
      //     alert("请滑动滑块至正确位置!");
      //     return
      // }
 
      // 3 发送短信验证码---就是一个请求, 把倒计时显示出来
      // 显示倒计时
      this.isShowCount=true;
      // 进行倒计时
      this.countDown()
      


    },
   

	
	
	//登录按钮
    async submitLogin(){
		if(!this.verification()){
			return
		}
      // 做登录
	  const res2=await phoneReginAPI({
	  		 phone:this.phoneNum,
	  		 verifyCode:this.codenum
	  })
	  console.log(res2);
	  
	  // if(判断，调用res2返回的值,举例res2.phone==this.phoneNum||res2.code==codenum){登录页面}
	  if(res2.code==0){
		  alert('登录成功');
		  //保存token到localStorage中
		  console.log(res2['x-auth-token']);
		  localStorage.setItem("x-auth-token",res2['x-auth-token']);
		  
		  //关闭
		  this.closeLogin();//调用上方的关闭函数
		  
		  
		  this.changeisbool(true);//手动改
		   this.changeUser();
	  }
    }
  }
}
</script>
<style lang = "less" scoped>
@import "../assets/css/global.less";

  .login-modal{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    .mask{
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.5);
    }
    .login-box{
      width: 555px;
      height: 423px;
      background: url("../assets/img/login-box-bg.png");
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;

      .close{
        position: absolute;
        right: 60px;
        top: 15px;
        cursor: pointer;
      }

      .title{
        display: flex;
        justify-content: center;
        padding: 45px 0 30px;
        color: #ccc;
        font-size: 18px;
        li{
          cursor:pointer;
        }
        .active{
            color:#333;
        }
      }

      .body{
        width: 360px;
        margin: 0 auto;

        .form{
          .uname{
            margin-bottom: 5px;
          }
          .input-group{
            display: flex;
            
            input{
              height: 48px;
              width: 100%;
              text-indent:10px;
              border: 1px solid #ccc;
            }
          }
          .code input{
              width: 260px;
              margin-right: 8px;
          }

          .code .btn{
            flex:1
          }
          .btn{
            height: 50px;
            line-height: 50px;
            background-color: @base-color;
            color: #fff;
            text-align: center;
            cursor: pointer;
          }
          .has-count{
            background-color: #ccc;
          }
        }
      }
    }
  }

  /deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>